<template>
  <div class="body">
    <FeeInner  v-if="dialogTableVisible"  :inner="innerdata" @close="handleClose"></FeeInner>
    <FeeAdd  v-if="dialogVisible"  @close="addClose"  ></FeeAdd>
    <ELTable v-bind="tableConfig">
      <template #search="{searchSubmit,params}">
        <div>
          <el-form :inline="true" class="demo-form-inline">
            <!-- 状态 -->
            <el-form-item label="状态">
              <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态" >
                <el-option label="已缴费" value="2" />
                <el-option label="未缴费" value="1" />
              </el-select>
            </el-form-item>
            <!-- 日期 -->
            <el-form-item label="日期">
              <DateSelect @dateChange="(e)=>dateChange(e,params)"></DateSelect>
            </el-form-item>
            <el-form-item label="楼栋">
              <BuildSelect   @update="(e:any)=>cascaderChange(e,params)"></BuildSelect>
            </el-form-item>
            <el-form-item label="房间">
              <el-input v-model="params.houseno" placeholder="请输入房间号" />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="params.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="params.mibile" placeholder="请输入电话" />
            </el-form-item>
            <el-form-item label="添加人">
              <el-input v-model="params.admin" placeholder="请输入添加人" />
            </el-form-item>
            <el-form-item label="流水账单">
              <el-input v-model="params.orderno" placeholder="请输入流水账单" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <!-- 功能按钮 -->
      <template #buttons="{ deleteAllHandle }">
        <div>
          <el-button type="primary" @click="dialogVisible = true">添加</el-button>
          <el-button type="danger" @click="deleteAllHandle">删除</el-button>
        </div>
      </template>
      <!-- 列表模块 -->
      <template #operate="{ scope, delrow }">
        <div>
          <el-button type="primary" @click="showInner(scope.row)" >详情</el-button>
          <el-button type="danger" @click="delrow(scope.row.id)">删除</el-button>
        </div>
      </template>
      <template #begindate="{ scope }">
        {{ formData(scope.row.begindate) }}至 {{ formData(scope.row.enddate) }}
      </template>
      <template #date="{ scope }">
        <div>
          {{ formData(scope.row.date) }}
        </div>
      </template>
    </ELTable>

  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import moment from 'moment';
import { feeList } from '../../service/fee/feelist'
import { delfee, delfees } from "../../service/fee/del";
import ELTable, { TableType } from "../../components/ELTable.vue";
import { column } from "./feecolum";
import FeeInner from "../../components/FeeInner.vue";
import FeeAdd from "../../components/FeeAdd.vue";
import BuildSelect from "../../components/BuildSelect.vue";
import DateSelect from "../../components/DateSelect.vue";

const dialogVisible = ref(false)
const dialogTableVisible = ref(false)

//房屋信息改变
const cascaderChange = (e:any,params:any)=>{
  console.log(e);
  console.log(params);
  if(!e) params.buildingid=null;
  else{
    params.buildingid=e[e.length-1];
  }
}
//日期改变
const dateChange = (e:any,params:any)=>{
  if (!e) {
    params.begindate = "";
    params.enddate = "";
  }
  else{ 
    params.begindate = e[0];
    params.enddate = e[1];
  }
}

const addClose = ()=>{
  dialogVisible.value = false
}
const handleClose = ()=>{
  dialogTableVisible.value = false
}
const formData = (a: string) => {
  return moment(a).format('YYYY-MM-DD');
}
const tableConfig = ref<TableType>({
  loadData: feeList,
  delDate: delfee,
  delallDate: delfees,
  column: column,
})

//展示详情
let innerdata = ref<any>({})
const showInner = (scope: any) => {
  dialogTableVisible.value = true
  innerdata.value = scope
}
</script>

<style lang="less" scoped>
@import url(../../assets/fee/fee.less);
</style>
